<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增考试工作人员')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-user-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">所属考点：</label>
                    <div class="col-sm-8">
                        <select id="siteId" name="siteId" class="form-control m-b" onchange="renderRoomSelect(this)">
                            <option th:each="site : ${sites}" th:value="${site.id}" th:text="${site.name }">
                        </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">监考考场：</label>
                    <div class="col-sm-8">
                        <select id="roomId" name="roomId" class="form-control m-b">
                            <option value="">请选择</option>
                        </select>
                    </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">考试科目：</label>
                <div class="col-sm-8">
                    <select name="subject" class="form-control m-b" th:with="type=${@dict.getType('exam_subject')}">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">工作人员：</label>
                <div class="col-sm-8">
                    <!--<input id="workUserId" name="userId" class="form-control" type="hidden" readonly>-->
                    <input id="workUserIdShow" name="userId" class="form-control" type="text" readonly onclick="selectUser()">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">考试时间：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="examTime" class="form-control" placeholder="yyyy-MM-dd" type="text">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "system/workuser"
        $("#form-user-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-user-add').serialize());
            }
        }

        $("input[name='examTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        function renderRoomSelect(obj) {
            $.ajax({
                type: "post",
                url: ctx + "system/room/listSelect",
                data: {
                    "examSite": $(obj).val()
                },
                success: function(res) {
                    if (res.data) {
                        $("#roomId").empty();
                        var optionText = '';
                        var dataArr = res.data;
                        for (var i = 0; i < dataArr.length; i++) {
                            optionText += '<option value="' + dataArr[i].id + '">' + dataArr[i].name + '</option>';
                        }
                        $("#roomId").append(optionText);
                    }
                }
            });
        }

        // submitHandler(index, layero)
        function selectUser() {
            console.log('选择用户');
            var url = prefix + "/selectUser"
            $.modal.open("选择用户", url,null,null,function (index, layero) {
                var iframeWin = layero.find('iframe')[0];
                var selectUserIds = iframeWin.contentWindow.submitHandler(index, layero);
                console.log(selectUserIds);
                // $("#workUserId").val(selectUserIds.split("|")[0]);
                $("#workUserIdShow").val(selectUserIds.split("|")[1]);
                layer.close(index);
            });
        }
    </script>
</body>
</html>